<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脑图树</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.hierarchy-0.5.0/build/hierarchy.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json', function(data) {
    console.log('data:',data,JSON.stringify(data))
    var graph = new G6.TreeGraph({
      container: 'mountNode',
      width: window.innerWidth,
      height: window.innerHeight,
      pixelRatio: 2,
      modes: {
        default: [{
          type: 'collapse-expand',
          onChange: function onChange(item, collapsed) {
            var data = item.get('model').data;
            data.collapsed = collapsed;
            return true;
          }
      }, 'drag-canvas', 'zoom-canvas']
      },
      defaultNode: {
        size: 16,
        anchorPoints: [[0, 0.5], [1, 0.5]],
        style: {
          fill: '#40a9ff',
          stroke: '#096dd9'
        }
      },
      defaultEdge: {
        shape: 'cubic-horizontal',
        style: {
          stroke: '#A3B1BF'
        }
      },
      layout: {
        type: 'mindmap',
        direction: 'H',
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 100;
        }
      }
    });

    var centerX = 0;
    graph.node(function(node) {
      if (node.id === 'Modeling Methods') {
        centerX = node.x;
      }

      return {
        size: 26,
        style: {
          fill: '#40a9ff',
          stroke: '#096dd9'
        },
        label: node.id,
        labelCfg: {
          position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left'
        }
      };
    });

    graph.data(data);
    graph.render();
    graph.fitView();
  });
</script>
</body>
</html>
